<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
import SvgIcon from "../svgIcon/index.vue";
import MenuItem from "./item.vue";
import MenuSub from "./sub.vue";

const store = useStore();

const lang = computed(() => {
  return store.getters["webset/lang"];
});

const props = defineProps({
  menu: Object,
});
</script>

<template>
  <a-sub-menu :key="menu.name">
    <template #icon>
      <SvgIcon :name="menu.meta.icon" />
    </template>
    <template #title>{{
      lang === "en" ? menu.meta.enTitle : menu.meta.title
    }}</template>
    <template v-for="menuChildren in menu.children">
      <MenuItem v-if="!menuChildren.children" :menu="menuChildren" />
      <MenuSub v-else :menuChildren="menu" />
    </template>
  </a-sub-menu>
</template>